<template>
  <div class="price-buy-container-101">
    <div class="row1">
      <div class="title">原价</div>
      <div class="price">￥ {{ Price.toFixed(2) }} 元 / 张</div>
    </div>
    <nut-divider style="color: #eee; margin-top: 5px" />
    <div class="row2" v-if="rateList.length > 0">
      <div
        class="item"
        v-for="(item, index) in rateList"
        :class="{ actived: selected == index }"
        @click="changeSelected(index)"
        :key="item.id"
      >
        {{ item.name == "NaN折" ? "-" : item.name }}
      </div>
    </div>
    <div class="row3">
      <div style="color: #5232b7">￥</div>
      <nut-input
        :placeholder="placeholderPrice"
        type="number"
        style="color: #15181d"
        v-model="limited_price"
      />
    </div>
    <div class="row4">*单张限价最终成交价格不会高于此价</div>

    <div class="tip">
      <div>出票价</div>
      <div
        v-if="
          selectedChannel.indexOf(3) !== -1 ||
          selectedChannel.indexOf(7) !== -1 ||
          selectedChannel.indexOf(8) !== -1 ||
          selectedChannel.indexOf(10) !== -1
        "
      >
        小于等于限价
      </div>
      <div v-else>以出票结果为准</div>
    </div>
  </div>
</template>
<script setup>
import { toRefs, ref, reactive, computed, watch, onMounted } from "vue";
import Taro, { useDidShow } from "@tarojs/taro";
const props = defineProps({
  info: Array,
  arealist: Array,
  Price: Number,
  rateList: Array,
  isShowPrice: Number,
  screenHeight: Number,
  screenWidth: Number,
  selectedChannelList: Array,
});
const {
  info,
  arealist,
  Price,
  rateList,
  isShowPrice,
  screenHeight,
  screenWidth,
  selectedChannelList,
} = toRefs(props);
//获取当前的渠道
const selectedChannel = computed(() => {
  return selectedChannelList.value.map((item) => item.id);
});
//判断一下当前是包含 渠道3 7 8 10

//四舍五入
const changeTwoDecimal = (x) => {
  let resNum = parseFloat(x);
  // isNaN()，判断一个变量是否为非数字的类型，非数字返回true，数字则返回false
  // console.log('你看=', isNaN(resNum))
  if (isNaN(resNum)) {
    return false;
  }
  resNum = Math.round(resNum * 100) / 100;
  return resNum;
};
//自定义含糊
const emit = defineEmits(["onLimitPrice"]);
const placeholderPrice = computed(() => {
  return `￥${changeTwoDecimal(
    Price.value * rateList.value[0]?.zhe
  )} ~ ￥${changeTwoDecimal(Price.value)}`;
});
watch(
  rateList,
  (newVal, oldVal) => {
    if (newVal) {
      console.log(newVal, "newVal");
      limited_price.value = changeTwoDecimal(
        Price.value * rateList.value[3]?.zhe
      );
    }
    // 注意：对于数组，oldVal 和 newVal 引用的是同一个数组对象，
    // 因为 Vue 的响应式系统是基于变更追踪的，而不是基于值比较的。
    // 如果你需要比较数组的内容，你可能需要自己实现一个深度比较函数。
  },
  { deep: true }
); // 由于我们要监听数组内部的变化，所以需要设置 deep: true

const selected = ref(3);
const limited_price = ref(changeTwoDecimal(Price.value * rateList.value[3]?.zhe));
const changeSelected = (e) => {
  selected.value = e;
  limited_price.value = changeTwoDecimal(Price.value * rateList.value[e]?.zhe);
};
const limitedPriceFun = (str) => {
  return arealist.value.filter((item) => item.regionName == str);
};
const emitLimitPrice = () => {
  return {
    limited_price: limited_price.value,
    zhe: rateList.value[selected.value]?.zhe * 100 + "折",
  };
};
defineExpose({ emitLimitPrice });
</script>
<style lang="scss">
.price-buy-container-101 {
  background-color: #fff;

  .row1 {
    display: flex;
    align-items: center;
    padding: 0 20px;
    // flex-direction: column;
    justify-content: space-between;
    font-size: 24px;
    padding: 5px;
    .title {
    }
    .price {
      color: #5232b7;
    }
  }

  .row2 {
    display: flex;
    justify-content: space-around;
    align-items: center;

    .item {
      width: 120px;
      padding: 10px;
      box-sizing: border-box;
      background-color: #eee;
      text-align: center;
      font-size: 24px;
      border-radius: 5px;
    }

    .actived {
      background: linear-gradient(to right, #5232b7, #7237bc);
      opacity: 0.8;
      color: #fff;
    }
  }

  .row3 {
    display: flex;
    padding: 10px;
    align-items: center;
    margin-top: 25px;
  }

  .row4 {
    font-size: 22px;
    margin-top: 10px;
    color: #5232b7;
  }
  .tip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    color: #5232b7;
  }
}
</style>
